<template>
  <div class="profile-container">
    <div class="profile-card">
      <div class="profile-header">
        <h1>个人资料</h1>
        <p>管理您的账户信息</p>
      </div>

      <div v-if="currentUser" class="profile-content">
        <div class="profile-info">
          <div class="info-item">
            <label>用户名</label>
            <div class="info-value">{{ currentUser.username }}</div>
          </div>
          
          <div class="info-item">
            <label>邮箱</label>
            <div class="info-value">{{ currentUser.email }}</div>
          </div>
          
          <div class="info-item">
            <label>电话号码</label>
            <div class="info-value">{{ currentUser.phone }}</div>
          </div>
          
          <div class="info-item">
            <label>注册时间</label>
            <div class="info-value">{{ formatDate(currentUser.createdAt) }}</div>
          </div>
        </div>

        <div class="password-card">
          <h2>修改密码</h2>
          <div class="form-row">
            <label>原密码</label>
            <input v-model="oldPassword" type="password" placeholder="请输入原密码" />
          </div>
          <div class="form-row">
            <label>新密码</label>
            <input v-model="newPassword" type="password" placeholder="请输入新密码" />
          </div>
          <button class="change-button" @click="handleChangePassword">提交修改</button>
        </div>

        <div class="profile-actions">
          <button @click="handleLogout" class="logout-button">
            <span>🚪</span>
            退出登录
          </button>
        </div>
      </div>

      <div v-else class="loading-state">
        <div class="loading-spinner"></div>
        <p>加载用户信息中...</p>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
import { authAPI } from '@/services/api'

export default {
  name: 'ProfileView',
  computed: {
    ...mapGetters(['currentUser'])
  },
  data() {
    return {
      oldPassword: '',
      newPassword: ''
    }
  },
  methods: {
    ...mapActions(['logout']),
    async loadMe() {
      const res = await authAPI.getCurrentUser()
      if (res.success) {
        this.$store.commit('SET_USER', res.data)
      }
    },
    async handleChangePassword() {
      if (!this.oldPassword || !this.newPassword) return
      const res = await authAPI.changePassword({ oldPassword: this.oldPassword, newPassword: this.newPassword })
      if (res.success) {
        alert('密码修改成功')
        this.oldPassword = ''
        this.newPassword = ''
      } else {
        alert(res.error || '修改失败')
      }
    },
    
    async handleLogout() {
      await this.logout()
      this.$router.push('/login')
    },
    
    formatDate(dateString) {
      if (!dateString) return '未知'
      // 兼容后端 LocalDateTime 多种序列化形式：字符串 / 数组 / 对象
      let date
      if (typeof dateString === 'string') {
        const normalized = dateString.replace(' ', 'T')
        date = new Date(normalized)
      } else if (Array.isArray(dateString)) {
        const [year, month, day, hour = 0, minute = 0, second = 0] = dateString
        if (year && month && day) {
          date = new Date(year, month - 1, day, hour, minute, second)
        }
      } else if (dateString && typeof dateString === 'object') {
        const { year, month, day, hour, minute, second } = dateString
        if (year && month && day) {
          date = new Date(year, (month - 1), day, hour || 0, minute || 0, second || 0)
        }
      }
      if (!date || isNaN(date.getTime())) return '未知'
      return date.toLocaleDateString('zh-CN', {
        year: 'numeric',
        month: 'long',
        day: 'numeric'
      })
    }
  },
  mounted() {
    // 如果未登录，跳转到登录页面
    if (!this.$store.getters.isLoggedIn) {
      this.$router.push('/login')
    }
    this.loadMe()
  }
  }
</script>

<style scoped>
.profile-container {
  min-height: calc(100vh - 64px);
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  padding: 20px;
}

.profile-card {
  background: white;
  border-radius: 16px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  padding: 40px;
  width: 100%;
  max-width: 500px;
  animation: slideUp 0.6s ease-out;
}

.password-card {
  margin: 20px 0 30px;
  padding: 16px;
  border: 1px solid #e1e5e9;
  border-radius: 8px;
  background: #fafafa;
}

.password-card h2 {
  margin: 0 0 12px 0;
  font-size: 16px;
}

.form-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.form-row label {
  width: 64px;
  color: #333;
}

.form-row input {
  flex: 1;
  padding: 8px 10px;
  border: 1px solid #e1e5e9;
  border-radius: 6px;
}

.change-button {
  padding: 10px 16px;
  background: #667eea;
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.profile-header {
  text-align: center;
  margin-bottom: 30px;
}

.profile-header h1 {
  color: #333;
  font-size: 28px;
  margin: 0 0 10px 0;
  font-weight: 600;
}

.profile-header p {
  color: #666;
  font-size: 14px;
  margin: 0;
  line-height: 1.5;
}

.profile-content {
  margin-bottom: 30px;
}

.profile-info {
  margin-bottom: 30px;
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid #e1e5e9;
}

.info-item:last-child {
  border-bottom: none;
}

.info-item label {
  font-weight: 500;
  color: #333;
  font-size: 14px;
}

.info-value {
  color: #666;
  font-size: 14px;
}

.profile-actions {
  text-align: center;
}

.logout-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: #fee;
  color: #c53030;
  border: 1px solid #feb2b2;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.logout-button:hover {
  background: #fdd;
  transform: translateY(-1px);
}

.loading-state {
  text-align: center;
  padding: 40px 0;
}

.loading-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid #e1e5e9;
  border-top: 3px solid #667eea;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 16px;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.loading-state p {
  color: #666;
  font-size: 14px;
  margin: 0;
}

@media (max-width: 480px) {
  .profile-container {
    padding: 10px;
  }
  
  .profile-card {
    padding: 30px 20px;
  }
  
  .profile-header h1 {
    font-size: 24px;
  }
  
  .info-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
}
</style>
